<template>
  <div class="personalInformation container">
    <TopNav />

    <div class="content ">
      <div class="margin-20">
        <div class=" slider-down">
          <div class="progress">参观胸卡及联络信息：20%</div>
          <van-progress :percentage="20" stroke-width="10" />
        </div>
        <div class="tips fz-12 slider-down delay7">
          以下信息将用于打印您的参观胸卡，及后续为您发送展会信息及提供增值参观服务
        </div>
      </div>

      <van-form class="form slider-down delay9" ref="form">

        <!-- <template v-for="(item) in formData">
          <template v-if="item.type==='select'">
            <van-field disabled name="picker" class="setDisabled" :rules="item.rules"  right-icon="arrow" :value="item.value" :label="item.label" :placeholder="item.placeholder" @click="!item.readonly ? item.showPicker = true :''" />
            <van-popup  v-model="item.showPicker" position="bottom">
              <van-picker show-toolbar :columns="item.data" @confirm="item.onCall" @cancel="item.showPicker = false" />
            </van-popup>
          </template>
          <template v-else-if="item.label">
            <van-field :value="item.value" v-model="item.value" :readonlyf="item.readonly" :label="item.label" :type="item.type" :placeholder="item.placeholder" :rules="!item.readonly?item.rules:[]"  />
          </template>
        </template> -->
        <template v-for="(item,index) in formData1">
          <template v-if="item.type==='select'">
  
            <van-field  :key="item.key"  disabled name="picker" class="setDisabled" :rules="item.rules" 
             right-icon="arrow" :value="item.options.defaultValue" :label="item.options.label"
              :placeholder="item.placeholder"  @click="item.showPicker = true " />
            <van-popup   v-model="item.showPicker" position="bottom">
              <van-picker show-toolbar :columns="item.options.options" @cancel="item.showPicker = false" />
            </van-popup>
            
          </template>
          <template  v-else-if="item.type==='input' || item.type==='tel'  ">
            <van-field  :key="item.key"  :value="item.options.defaultValue" v-model="item.options.defaultValue" :readonly="item.options.disabled" :label="item.options.label" :type="item.type" :placeholder="item.options.placeholder" :rules="!item.options.disabled?item.rules:[]"  />
          </template>
        </template>

        <div class="margin-20">
          <p><strong>隐私声明(点击文字勾选此项)*</strong></p>
          <div class="flex fz-12">
            <van-checkbox v-model="formData.checked" shape="square">我已阅读、理解并同意接受</van-checkbox>
            《<span class="color-tip" @click="formData.protocolShow=!formData.protocolShow">观众登记许可申明</span>》
          </div>

        </div>

        <van-popup v-model="formData.protocolShow" position="bottom" closeable close-icon="close" :style="{ height: '90%' }">
          <div class="popup margin-20">
            <h4>隐私声明</h4>
            <p>上述资料信息为本人自愿提供给北京励德展览有限公司。本人同意：(a)该公司可在其数据库中存储上述资料信息；(b)该公司可将上述资料信息提供给第三方（包括该公司在国内外的下属和/或关联企业、展会合作伙伴及服务商等），任何收到上述资料信息的第三方及该公司可将上述资料信息用于存储、提供展会服务或相关业务拓展之目的。本人理解并同意，上述信息资料的存储、传递及使用等将适用该公司或第三方之营业地点（无论境内或境外）的相关法律规定；以及(c)该公司及任何收到上述信息的第三方可通过电话、传真、带有链接的电子邮件、短信、邮寄等方式联系我和/或向我本人发送包含但不限于展会注册确认、推广宣传、会议活动、商务配对、调研、有奖活动、折扣优惠等信息。</p>
          </div>

        </van-popup>

        <div class="btn-group margin-20">
          <van-button round type="default" class="nostyle">稍后回来完成登记</van-button>
          <van-button round  @click="goNext">继续登记</van-button>
        </div>

      </van-form>

    </div>

  </div>
</template>
<script lang="ts">
import personalInformation from "./personalInformation";
export default personalInformation;
</script>
<style lang="scss" scoped>
.personalInformation {
  .content {
    .btn-group {
      margin-top: 20px;
      margin-bottom: 20px;
      display: flex;
      .van-button {
        flex: 1;
      }
      .nostyle {
        background: none;
        color: $default-color;
        border: 1px solid $warn-color;
        margin-right: 18px;
      }
    }
  }
  .popup {
    h4 {
      font-size: 16px;
      text-align: center;
      line-height: 50px;
      border-bottom: 1px solid #eee;
      margin-top: 10px;
    }
    p {
      text-indent: 20px;
      font-size: 14px;
    }
  }
}
</style>